<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    用户名： <input type="text" /> <span id="tip"></span> <br />
    <button id="btn">点击按钮查看用户名是否可用</button>

    <script>
      const btn = document.querySelector('#btn')
      const tip = document.querySelector('#tip')
      btn.onclick = function () {
        // 获取用户输入的用户名
        const name = document.querySelector('input[type=text]').value.trim()
        // 利用ajax发送get请求:
        // 1. 创建xhr对象
        const xhr = new XMLHttpRequest()
        // 2. 设置请求方式和请求的url地址
        // console.log(xhr.readyState)
        xhr.open('get', 'http://localhost:5000/check?name=' + name)
        // console.log(xhr.readyState)

        // 3. 设置请求头(但是get请求无需设置请求头)

        // 4. 发送请求
        xhr.send(null) //get请求,传入null或什么都不传入

        // console.log('请求发送之后的代码执行了')
        // ajax请求是异步的.所以什么时候响应完成,我们无法知道
        //所以ajax技术,在xhr对象上提供了一个属性叫做readyState
        // 这个xhr.readyState记录了整个请求响应处于什么阶段
        // 在整个请求响应过程中,xhr.readyState的值会变化,变化的范围是0~4
        // 0 还没有调用open方法
        // 1 已经调用了open方法
        // 2 已经开始接收响应头的信息
        // 3 已经开始接收响应主体的信息
        // 4 响应完成
        // 监听xhr.readyState的变化
        xhr.onreadystatechange = function () {
          // onreadystatechange会触发3次, readyState的值分别是2,3,4
          if (xhr.readyState === 4) {
            //响应完成了
            // 完成不代表成功
            // xhr.status 返回响应首行中的状态码, ajax请求中,判断成功只需要判断状态码是否是200
            if (xhr.status === 200) {
              console.log('请求响应成功了')
              // 成功之后,获取响应主体的数据
              // xhr.responseText 用来获取响应主体的数据
              // console.log(xhr.responseText)
              // 返回的响应主体的内容是一个json字符串,如果要获取里面的数据,不方便,所以一般我们会先将json字符串转成js对象,再获取数据
              const data = JSON.parse(xhr.responseText)
              // console.log(data)
              if (data.success) {
                tip.innerText = data.message
                tip.style.color = 'green'
              } else {
                tip.innerText = data.message
                tip.style.color = 'red'
              }
            } else {
              console.log('请求响应失败了')
            }
          }
        }
      }

      console.log('事件注册完了')
    </script>
  </body>
</html>
